<script setup>
    import {ref} from 'vue'
    import OrderCard from '@/components/order/OrderCard.vue'
    import {useNewOrderStore} from '@/stores/newOrder.js';

    const newOrder = useNewOrderStore()

    const orderList = ref([])
    const orderCount = ref(0)
    const orderPrice = ref(0)
    
    newOrder.newOrderList.forEach(element => {
        element.list.forEach(ele => {
            orderCount.value += ele.number
            orderPrice.value += ele.number*ele.price
        })

        orderList.value.push({name:element.name,list:element.list,price:(orderPrice.value).toFixed(2),count:orderCount.value})
    });
</script>

<template>
    <div class="order_list">
        <div class="order_list_header">我的订单</div>
        <div class="order_list_content">
            <div class="order_list_content_item" v-for="item,index in orderList" :key="index">
                <OrderCard :orderList="item"/>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.order_list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: .5rem;
    background-color: $dark-bgColor;
    overflow-y: scroll;

    &_header {
        padding: .08rem .18rem;
        font-size: .16rem;
        color: $content-fontcolor;
        text-align: center;
        line-height: .24rem;
        background-color: $bgColor;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    &_content {
        margin-top: .58rem;
    }
}
</style>